<template>
                  <div
                id="content"
                @drop="dragend"
                :style="{ height: height + 'px' }"
              >
                <grid-layout
                  style="height: 100%"
                  ref="gridlayout"
                  v-model:layout="layout"
                  :col-num="12"
                  :row-height="30"
                  :is-draggable="true"
                  :is-resizable="true"
                  :vertical-compact="true"
                >
                  <grid-item
                    ref="gridItemRefs"
                    :key="item.i"
                    v-for="(item, index) in layout"
                    @click="getSetting(item)"
                    :x="item.x"
                    :y="item.y"
                    :w="item.w"
                    :h="item.h"
                    :i="item.i"
                    @resize="resizeGridItem(index, $event)"
                  >
                    <span class="close"
                      ><el-icon @click.stop="delItem(item)"><Close /></el-icon
                    ></span>
                    <template v-if="'container' === item.category">
                      <component
                        ref="fieldRef"
                        :is="getFieldWidget(item)"
                        :widget="item"
                        :fileName="fileName"
                        v-model:setting="setting"
                      ></component>
                    </template>
                    <template v-else>
                      <component
                        ref="fieldRef"
                        :is="getFieldWidget(item)"
                        :widget="item.config"
                        :fileName="fileName"
                        @getData="getAllData"
                      ></component>
                    </template>
                  </grid-item>
                </grid-layout>
              </div>
</template>
<script>
//局部批量注册组件
const requireAll = require.context("./components/", true, /\.vue$/);
const componentsObj = {};
let arr = [];
const modulList = requireAll.keys().map((item) => requireAll(item));
modulList.forEach(({ default: modulObj }) => {
  componentsObj[modulObj.__name] = modulObj;
  arr.push(modulObj.__name);
});
export default {
  components: componentsObj, //注册所有相关组件
  data() {
    return {
      comList: arr,
    };
  },
};
</script>
<script setup>
import { ref, onMounted, getCurrentInstance, nextTick, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Close, Plus, Grid } from "@element-plus/icons-vue";
import { deepClone } from "@/utils/arr";
import tool from "@/utils/tool";
let mouseXY = { x: null, y: null };
const setting = ref();
let DragPos = {};
let colNum = 12;
let height;
const configType = ref();
const gridlayout = ref(null);
const fileName = ref();
const gridItemRefs = ref([]);
const fieldRef = ref(null);
</script>
